<template>
	<div style="width:100%">
		<div id="maindg" style="min-width: 100%;height:280px;"></div>
		
	</div>
</template>

<script>
	import * as echarts from 'echarts';
	export default {
		name:"tubiaof",
		props: ['jieyueliangmsg'],
		  data(){
			  return{
			  	tongjimsg:{},
				datelist:[],
				jielist:[],
				huanlist:[],
			  }
		  },
		  watch:{
			  jieyueliangmsg(oldval,newval){
				  this.getmsg()
			  }
		  },
		  created () {
			
		  },
		  mounted(){
			this.getmsg()
		  },
		  methods:{
			  async getmsg(){
				  this.tongjimsg=this.jieyueliangmsg
				  this.datelist=[]
				  this.jielist=[]
				  this.huanlist=[]
				  for(let item of this.tongjimsg){
					  this.datelist.push(item.name)
					   this.jielist.push(item.jie_num) // 敏感
					   this.huanlist.push(item.huan_num) // 非敏感
				  }
				  console.log( '你好',this.datelist)
				  // this.jiemsg=this.jieyuemsg
				  let that =this
					  setTimeout(res=>{
						  that.getbiao()
					  },500)
					 
				  
				  
			  },
			  getbiao(){
				let a = this.datelist
				let b = this.jielist
				let c = this.huanlist
				
				// let b=this.jiemsg.borrow_zhanbi
				
				  // console.log('这是a',b)
				var myChart = echarts.init(document.getElementById('maindg'));
				let datas = [
				  ////////////////////////////////////////
				  [
				    { name: '网页新闻', value: 5.6 },
				    { name: 'APP新闻', value: 1 },
				    { name: '论坛', value: 0.8 },
				    { name: '博客', value: 0.5 },
				    { name: '微博', value: 0.5 },
				    { name: '微信公众号', value: 3.8 },
					{ name: '小红书', value: 3.8 },
					{ name: '百家号', value: 3.8 },
					{ name: '头条号', value: 3.8 },
					{ name: '视频', value: 3.8 },
					{ name: '评论', value: 3.8 },
					{ name: '其他', value: 3.8 }
				  ],
				
				];
			 let	option = {
				  title: {
				    text: '媒体分布',
				    left: 'center',
				    textStyle: {
				      color: '#999',
				      fontWeight: 'normal',
				      fontSize: 14
				    }
				  },
				  series: datas.map(function (data, idx) {
				    var top = idx * 33.3;
				    return {
				      type: 'pie',
				      radius: [20, 60],
				      top: top + '%',
				      left: 'center',
				      width: 400,
				      itemStyle: {
				        borderColor: '#fff',
				        borderWidth: 1
				      },
				      label: {
				        alignTo: 'edge',
				        formatter: '{name|{b}}\n{time|{c} }',
				        minMargin: 5,
				        edgeDistance: 10,
				        lineHeight: 15,
				        rich: {
				          time: {
				            fontSize: 10,
				            color: '#999'
				          }
				        }
				      },
				      labelLine: {
				        length: 15,
				        length2: 0,
				        maxSurfaceAngle: 80
				      },
				      labelLayout: function (params) {
				        const isLeft = params.labelRect.x < myChart.getWidth() / 2;
				        const points = params.labelLinePoints;
				        // Update the end point.
				        points[2][0] = isLeft
				          ? params.labelRect.x
				          : params.labelRect.x + params.labelRect.width;
				        return {
				          labelLinePoints: points
				        };
				      },
				      data: data
				    };
				  })
				};
				        // 使用刚指定的配置项和数据显示图表。
				        myChart.setOption(option);
			  }
		  },
		
	}
</script>

<style>
</style>